<template>
    <view class="app" v-if="!loading">
        <view class="list_wrap">
            <view class="title">
                <view class="left">
                    <view class="iconfont iconmoban"></view>
                    <text>{{template.name}}</text>
                </view>
                <view class="right" @click="toStageTemplate">
                    <view class="iconfont iconqiehuan"></view>
                    <text>切换阶段模板</text>
                </view>
            </view>

                  <view class="item" v-for="(item,index) in template.hkds_site_stage" :key="index" @click="chooseItem(item,index)">
                <view class="sel" :class="{on: selIndex ===
                 index}"></view>
                <text>{{item.name}}</text>
            </view>

        </view>
    </view>
</template>

<script>

import { getStageList, getDefaultStageTemplate } from '@/api/constructionSite'

export default {
	data() {
		return {
			selIndex: null,
			option: {},
			template: {},
			loading: false
		}
	},
	onLoad(option) {
		this.option = option
	},
	onShow() {
		this.getList()
	},
	methods: {
		getList() {
			this.loading = true
			this.postRequest().then(res => {
				this.loading = false
				this.template = res.data.list || {}
				if (this.option.stage_id) {
					const index = this.template.hkds_site_stage.findIndex(item => item.id == this.option.stage_id)
					this.selIndex = index > -1 ? index : null
				}
			})
		},
		postRequest() {
			if (this.option.current_stage_group_id) {
				return getStageList({ group_id: this.option.current_stage_group_id })  // 1
			}
			return getDefaultStageTemplate({})
		},
		chooseItem(item, index) {
			this.selIndex = index
			const params = {
				...this.option,
				stage_id: item.id,
				stage_txt: item.name
			}
			uni.navigateTo({
				url: `${this.option.url}${this.commonJS.queryData(params)}`
			})
			// if (this.option.url == 'addCS') {
			// 	let pages = getCurrentPages()// 获取页面栈
			//  let prevPage = pages[pages.length - 2]// 上一个页面
			//    if (prevPage) {
			// 		prevPage.$vm.form.current_stage_id = item.id
			// 		prevPage.$vm.stage_txt = item.name
			// 		uni.navigateBack()
			// 	}
			// } else {
			// 	uni.navigateTo({
			// 	    url: `${this.option.url}${this.commonJS.queryData(params)}`
			//     })
			// }
		},
		toStageTemplate() {
			uni.navigateTo({
				url: `/pages/constructionSite/selStageTemplate${this.commonJS.queryData(this.option)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
.app{
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-top: 20px;
    box-sizing: border-box;
    .list_wrap {
        padding: 0 30px;
        background-color: #fff;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px;
            .left,.right {
                display: flex;
                align-items: center;
            }
            .left {
                .iconmoban{
                    color: #CCCCCC;
                }
                text {
                    padding-left: 11px;
                    font-size:28px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                }
            }
            .right {
                .iconqiehuan {
                    color:rgba(255,105,0,1);
                }
                text {
                    padding-left: 10px;
                    font-size:24px;
                    color:rgba(255,105,0,1);
                }
            }
        }
        .item {
            display: flex;
            align-items: center;
            height: 90px;
            border-top: 1px solid #EEEEEE;
                  .sel {
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #ccc;
                    background-color: #fff;
				&.on {
                    border-color: transparent;
					background: url($imgUrl+"common/selected.png") no-repeat
						center/cover #ffd11a;
				}
			}
                text {
                    font-size:30px;
                    color:rgba(51,51,51,1);
                    padding-left: 19px;
                }
        }
    }
}
</style>
